<!-- 封装的接单大厅中的每个案件的组件 -->
<template>
	<view class="order-item-box" @click="cardItemClick">
		<view class="card-container">
			<view class="left-box">
				<view class="left-text">订单编号：{{ orderItem.trade_no }}</view>
				<view class="left-text" v-if="order_type != 4">
					案件类型：
					<text class="text-color">{{ orderItem.lawyer_type }}</text>
				</view>
				<view class="left-text" v-if="order_type === 3">发布时间：{{ orderItem.create_time }}</view>
				<view class="left-text" v-if="order_type < 3">咨询时间：{{ $u.utils.formatDate(orderItem.start_time) }}</view>
				<block v-if="order_type === 4">
					<view class="left-text">咨询时间：{{ orderItem.create_time }}</view>
					<view class="left-text">咨询时长：{{ orderItem.total_time | getDuration }}</view>
					<view class="left-text">咨询费用：{{ orderItem.real_money }}元</view>
				</block>
			</view>
			<view class="right-box">
				<!-- 上门服务 -->
				<block v-if="order_type === 1">
					<!-- <view style="color: #1DB100" v-if="orderItem.status === 1">{{ orderItem.orderState.text }}</view>
					<view style="color: #F69100" v-else-if="orderItem.status === 0">{{ orderItem.orderState.text }}</view> -->
					<view style="color: #00C9B1" v-if="orderItem.status === 2">上门中</view>
					<view style="color: #00C9B1" v-else-if="orderItem.status === 3">已完成</view>
					<view style="color: #F50000" v-else-if="orderItem.status === -1">订单失效</view>
					<!-- <view class="text-color" v-if="orderItem.status === 0">{{ orderItem.orderState.sur_time }}</view> -->
				</block>
				<!-- 面对面咨询 -->
				<block v-else-if="order_type === 2">
					<view style="color: #F69100" v-if="orderItem.status === 2">待服务</view>
					<view style="color: #00C9B1" v-else-if="orderItem.status === 3">已完成</view>
					<view style="color: #F50000" v-else-if="orderItem.status === -1">订单失效</view>
				</block>
				<!-- 官司订单 -->
				<block v-else-if="order_type === 3">
					<view style="color: #F69100" v-if="orderItem.status === 1">待接单</view>
					<view style="color: #00C9B1" v-else-if="orderItem.status === 2">已接单</view>
					<view style="color: #00C9B1" v-else-if="orderItem.status === 3">待客户确认完成</view>
					<view style="color: #00C9B1" v-else-if="orderItem.status === 4">已完成</view>
				</block>
				<!-- 图书咨询 -->
				<block v-else-if="order_type === 4">
					<view class="avatar-box">
						<u-avatar :src="orderItem.lawyer_info.avatar" size="80"></u-avatar>
						<view class="user-name">{{ orderItem.lawyer_info.nick_name }}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="button-btns">
			<!-- 上门服务 类型下会有的按钮格式 -->
			<block v-if="order_type === 1">
				<!-- 待接单 -->
				<u-button :custom-style="orderBtn" v-if="orderItem.status === 0" @click.stop="orderClick">接单</u-button>
				<!-- 已接单 -->
				<block v-else-if="orderItem.status === 1">
					<u-button class="cancelBtn" :custom-style="cancelBtn" @click="cancelClick">取消订单</u-button>
					<u-button :custom-style="orderBtn" @click="contactClick">在线联系</u-button>
				</block>
				<!-- 上门中 -->
				<block v-else-if="orderItem.status === 2">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="detailClick">订单详情</view>
					<view class="statusBtn" @click.stop="completeClick">确认完成</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="detailClick">订单详情</u-button>
					<u-button :custom-style="orderBtn" @click.stop="modalShow = true">确认完成</u-button>
				</block>
				<!-- 已完成 -->
				<block v-else-if="orderItem.status === 3">
					<!-- <view class="statusBtn" @click.stop="evaClick">查看评价</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="detailClick">订单详情</u-button>
					<u-button :custom-style="orderBtn" @click.stop="evaClick">查看评价</u-button>
				</block>
				<!-- 已失效 -->
				<block v-else-if="orderItem.status === 4">
					<!-- <view class="statusBtn" @click.stop="detailClick">失效原因</view> -->
					<u-button :custom-style="orderBtn" @click.stop="detailClick">失效原因</u-button>
				</block>
			</block>
			<!-- 面对面 -->
			<block v-else-if="order_type === 2">
				<!-- 待服务 -->
				<block v-if="orderItem.status === 2">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="ptpDetailClick">查看详情</view>
					<view class="statusBtn" @click.stop="completeClick">确认完成</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="ptpDetailClick">查看详情</u-button>
					<u-button :custom-style="orderBtn" @click.stop="modalShow = true">确认完成</u-button>
				</block>
				<!-- 服务已完成 -->
				<block v-if="orderItem.status === 3">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="ptpDetailClick">查看详情</view>
					<view class="statusBtn" @click.stop="evaClick">查看评价</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="ptpDetailClick">查看详情</u-button>
					<u-button :custom-style="orderBtn" @click.stop="evaClick">查看评价</u-button>
				</block>
				<!-- 订单已失效 -->
				<block v-if="orderItem.status === -1">
					<!-- <view class="statusBtn" @click.stop="ptpDetailClick">取消原因</view> -->
					<u-button :custom-style="orderBtn" @click.stop="ptpDetailClick">查看原因</u-button>
				</block>
			</block>
			<!-- 官司订单 -->
			<block v-else-if="order_type === 3">
				<!-- 待接单 -->
				<block v-if="orderItem.status === 1">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="orderClick">立即接单</view>
					<view class="statusBtn" @click.stop="detailClick">订单详情</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="orderClick">立即接单</u-button>
					<u-button :custom-style="orderBtn" @click.stop="cardItemClick">订单详情</u-button>
				</block>
				<!-- 已接单 -->
				<block v-if="orderItem.status === 2">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="completeClick">确认完成</view>
					<view class="statusBtn" @click.stop="detailClick">订单详情</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="modalShow = true">确认完成</u-button>
					<u-button :custom-style="orderBtn" @click.stop="cardItemClick">订单详情</u-button>
				</block>
				<!-- 已完成 -->
				<block v-if="orderItem.status === 3">
					<!-- <view class="statusBtn" style="margin-right: 15rpx;" @click.stop="evaClick">客户评价</view>
					<view class="statusBtn" @click.stop="detailClick">订单详情</view> -->
					<u-button class="cancelBtn" :custom-style="orderBtn" @click.stop="evaClick">客户评价</u-button>
					<u-button :custom-style="orderBtn" @click.stop="cardItemClick">订单详情</u-button>
				</block>
			</block>
		</view>

		<!-- 询问用户是否确认完成的模态框 -->
		<!-- <delete-model v-model="modalShow" content="是否确认已完成此订单任务？" confirm-color="#00C9B1" :show-cancel-button="true" @confirm="modelDefClick"></delete-model> -->
		<!-- 删除帖子的提示 -->
		<delete-model
			:show="modalShow"
			tip="是否确认已完成此订单任务？"
			cancelText="取消"
			confirmText="确认"
			@cancel="modalShow = false"
			@confirm="modelDefClick"
			@tap.stop
		></delete-model>
	</view>
</template>

<script>
export default {
	// 注：一个订单的状态有：待接单、已接单、上门中、已完成、已失效 5个状态
	name: 'order-item',
	props: {
		// 订单的数据对象
		orderItem: {
			type: Object,
			default: function() {
				return {};
			}
		},
		// 订单类型，控制按照哪种订单UI渲染数据
		// 暂定：1 上门服务、2 面对面服务、3 官司订单、4 图文咨询
		order_type: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			// 控制模态框的显示与隐藏
			modalShow: false,
			// 接单按钮的样式
			orderBtn: {
				width: '138rpx',
				height: '56rpx',
				color: '#FEFEFE',
				backgroundColor: '#00C9B1',
				fontSize: '28rpx',
				marginLeft: '17rpx'
			},
			cancelBtn: {
				width: '138rpx',
				height: '56rpx',
				fontSize: '28rpx',
				marginLeft: '17rpx',
				color: '#FEFEFE',
				backgroundColor: '#D9D9D9'
			}
		};
	},
	filters: {
		// 将秒钟数转换为小时+分钟的格式
		getDuration(second) {
			let h = Math.floor(second / 3600)	// 向下取整得到小时数
			let m = Math.floor((second % 3600) / 60)	// 向下取整得到分钟数
			let s = second % 60 	// 得到秒数
			let str = `${h == 0 ? '' : (h + '小时')}${m == 0 ? '' : (m + '分钟')}${s == 0 ? '' : (s + '秒')}`
			return str
		}
	},
	methods: {
		// 监听 card 的点击事件，将绑定的案件 id 传递给父元素
		cardItemClick() {
			this.$emit('click', this.orderItem.id);
		},
		// 监听 接单 按钮的点击事件
		async orderClick() {
			// 先对用户进行权限校验
			const res = await this.$u.utils.login();
			if (res) {
				// 将被点击项的 id 传递给父组件
				this.$emit('orderClick', this.orderItem.id);
			}
		},
		// 取消订单 按钮的点击事件
		async cancelClick() {
			// 先对用户进行权限校验
			const res = await this.$u.utils.login();
			if (res) {
				// 将被点击项的 id 传递给父组件
				this.$emit('cancelClick', this.orderItem.id);
			}
		},
		// 在线联系 按钮的点击事件
		async contactClick() {
			// 先对用户进行权限校验
			const res = await this.$u.utils.login();
			if (res) {
				// 用户已登录则跳转到聊天页面并携带此订单的 id
				this.$u.route({
					type: 'to',
					url: 'myPackageA/pages/views/chatting?id=' + this.orderItem.id
				});
			}
		},
		// 订单详情/查看详情/失效原因 按钮的点击事件携参跳转到 上门中/上门已完成/已失效 页面（传递 id 过去在该页面根据订单状态进行渲染）
		detailClick() {
			this.$u.route('/myPackageA/pages/views/in-the-door?id=' + this.orderItem.id);
		},
		// 查看评价 按钮的点击事件:携参跳转到 客户评价页面
		evaClick() {
			if(!this.orderItem.has_comment) return this.$u.toast('该订单用户暂未评价')
			this.$u.route('/myPackageA/pages/views/customer-evaluation?id=' + this.orderItem.id);
		},
		// 询问是否确认完成的模态框中的 确定 按钮点击事件
		async modelDefClick() {
			// order_type 小于 3 则订单类型为 上门/面对面
			if(this.order_type < 3) {
				const res = await this.$u.api.confirmOrderItem({order_id: this.orderItem.id})
				if(!res) return
				this.$u.toast('确认成功，订单已完成')
				this.$emit('confirmOrderItem', this.orderItem.id)
				this.modalShow = false
			} else {	// 律师 确认完成 官司订单
				const res = await this.$u.api.conformLawsuitOrder({order_id: this.orderItem.id})
				if(!res) return
				this.$u.toast('确认成功，订单已完成')
				this.$emit('confirmOrderItem', this.orderItem.id)
				this.modalShow = false
			}
			
		},
		// 面对面上门类型中的 查看详情/取消原因 按钮的点击事件(携参跳转到面对面订单详情页面)
		ptpDetailClick() {
			this.$u.route('/myPackageA/pages/views/order-ptp-detail?id=' + this.orderItem.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.order-item-box {
	margin: 0rpx 23rpx 20rpx;
	min-height: 278rpx;
	background-color: white;
	padding: 30rpx;
	border-radius: 20rpx;
}
.card-container {
	width: 100%;
	position: relative;
}
.right-box {
	position: absolute;
	top: -45rpx;
	right: 0rpx;
	display: block;
	display: flex;
	flex-direction: column;
	height: 88px;
	align-items: flex-end;
	justify-content: flex-start;
	font-size: 26rpx;
	padding-top: 15rpx;
}
.text-color {
	color: $u-text-color;
	margin-top: 10rpx;
}

.left-text {
	margin: 15rpx 0;
	color: #141418;
	font-size: 30rpx;
	margin: 15rpx 0;
}
// #ifndef H5
.button-btns {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 10rpx;
}
// #endif
// #ifdef H5
.button-btns {
	position: absolute;
	bottom: 30rpx;
	right: 28rpx;
	// position: relative;
	.cancelBtn {
		position: absolute;
		bottom: 0rpx;
		right: 155rpx;
	}
}
// #endif
.statusBtn {
	width: 141rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: $u-text-color;
	border: 2rpx solid $u-text-color;
	border-radius: 30rpx;
	font-weight: 500;
	font-family: PingFang SC;
}
.avatar-box {
	margin-top: 90rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.user-name {
		min-width: 100rpx;
		padding: 5rpx 10rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: linear-gradient(180deg, #ffb54b, #f5a22a);
		border-radius: 22rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
}
</style>
